<template>
  <div class="top-tabs" :class="[{ compact }, shadowClass]">
    <div class="left">
      <slot name="logo" />
    </div>

    <div class="nav" ref="navRef">
      <button
        v-for="(it, i) in items"
        :key="it.key"
        ref="btnRefs"
        type="button"
        class="tab-btn"
        :class="{ 'is-active': it.key === modelValue, 'is-first': i===0 }"
        :aria-selected="it.key === modelValue"
        @click="$emit('update:modelValue', it.key)"
      >
        <span class="label">{{ it.label }}</span>
      </button>

      <!-- 动态滑块 -->
      <span class="indicator" ref="indicatorRef"></span>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, nextTick, onMounted, onBeforeUnmount, computed } from 'vue';

const props = defineProps({
  modelValue: { type: String, required: true },
  items: { type: Array, default: () => [] },
  /** 是否紧凑模式（去掉底部投影、减小间距） */
  compact: { type: Boolean, default: false },
});
defineEmits(['update:modelValue']);

const navRef = ref(null);
const btnRefs = ref([]);
const indicatorRef = ref(null);

const shadowClass = computed(() => (props.compact ? '' : 'with-shadow'));

function positionIndicator() {
  const nav = navRef.value;
  const ind = indicatorRef.value;
  if (!nav || !ind) return;

  // 找当前激活的按钮
  const activeBtn = btnRefs.value.find(
    (el) => el && el.classList.contains('is-active')
  );
  if (!activeBtn) {
    ind.style.opacity = 0;
    return;
  }

  // 计算相对 nav 的 left
  const navBox = nav.getBoundingClientRect();
  const btnBox = activeBtn.getBoundingClientRect();
  const left = btnBox.left - navBox.left;

  ind.style.width = `${btnBox.width}px`;
  ind.style.transform = `translateX(${left}px)`;
  ind.style.opacity = 1;
}

const reposition = () => nextTick(positionIndicator);

onMounted(() => {
  reposition();
  window.addEventListener('resize', reposition);
});
onBeforeUnmount(() => {
  window.removeEventListener('resize', reposition);
});
watch(() => props.modelValue, reposition);
watch(() => props.items, reposition, { deep: true });
</script>

<style scoped>
/* 主题变量：继承自 Element Plus，可按需覆盖 */
:root {
  --tabs-accent: var(--el-color-primary);
  --tabs-bg: var(--el-bg-color, #fff);
  --tabs-text: var(--el-text-color-primary);
  --tabs-text-regular: var(--el-text-color-regular);
  --tabs-muted: rgba(0, 0, 0, 0.04);
}

.top-tabs {
  background: var(--tabs-bg);
  padding: 12px 16px 0 16px;
  border-radius: 12px 12px 0 0;
}
.top-tabs.with-shadow {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.top-tabs.compact {
  padding-top: 8px;
  box-shadow: none;
}

.left {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--tabs-text);
  font-weight: 600;
  margin-bottom: 8px;
}

/* 横向导航 */
.nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 12px 6px; /* 保留底部空间给滑块 */
  overflow-x: auto;
}

/* 单个按钮 */
.tab-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border: 0;
  background: transparent;
  color: var(--tabs-text-regular);
  border-radius: 999px;
  cursor: pointer;
  transition: all .18s ease;
  white-space: nowrap;
  outline: none;
  user-select: none;
}
.tab-btn:hover {
  color: var(--tabs-text);
  background: var(--tabs-muted);
  transform: translateY(-1px);
}
.tab-btn:active { transform: translateY(0); }

.tab-btn.is-active {
  color: var(--tabs-accent);
  font-weight: 700;
  background: color-mix(in srgb, var(--tabs-accent) 10%, transparent);
  /* 如果不支持 color-mix，fallback： */
  background: rgba(64, 158, 255, .10);
  box-shadow: 0 4px 10px rgba(64, 158, 255, .15);
}

/* 滑块指示条 */
.indicator {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--tabs-accent), color-mix(in srgb, var(--tabs-accent) 70%, #fff));
  box-shadow: 0 2px 8px color-mix(in srgb, var(--tabs-accent) 40%, transparent);
  transform: translateX(0);
  transition: transform .24s cubic-bezier(.2,.8,.2,1), width .24s ease, opacity .12s linear;
  opacity: 0;
}

/* 小屏优化 */
@media (max-width: 768px) {
  .tab-btn { height: 34px; padding: 0 12px; }
}
</style>
